<template>
    <!--顶级Laytou 容器-->
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <!--侧边栏容器-->
        <a-layout-sider v-model="collapsed" collapsible>
            <!--logo-->
            <div class="logo">
                <img src="/vite.svg" class="circleImg">
            </div>
            <!--
                :default-selected-keys="['1']"   初始选中的 子菜单想
                mode   菜单模式  inline为内嵌模式
            -->
            <a-menu theme="dark" :default-selected-keys="['1']" mode="inline">
                <!--一级菜单-->
                <a-sub-menu key="sub1">
                    <span slot="title">
                        <a-icon type="setting" theme="filled" />
                        <span>
                            <AppstoreOutlined /> 系统管理
                        </span>
                    </span>
                    <!--二级菜单 路由嵌套跳转-->
                    <a-menu-item key="1" @click="changeMenu('admin')">
                        <MenuUnfoldOutlined /> 管理员
                    </a-menu-item>
                    <a-menu-item key="2" @click="changeMenu('role')">
                        <MenuFoldOutlined /> 角色
                    </a-menu-item>
                    <a-menu-item key="3" @click="changeMenu('menu')">
                        <BankOutlined /> 菜单
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <!--右边主要内容-->
        <a-layout>
            <!--右边头部-->
            <a-layout-header style="background: #fff; padding: 0" />
            <!--右边内容-->
            <a-layout-content style="margin: 0 16px">
                <!--内容头部title-->
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>管理</a-breadcrumb-item>
                    <!-- <a-breadcrumb-item>{{router.currentRoute.value.path.replace("/", "")}}</a-breadcrumb-item> -->
                    <!-- 内容组件 -->
                    <a-breadcrumb-item>{{ router.currentRoute.value.name }}</a-breadcrumb-item>

                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <!--定义路由出口-->
                    <router-view />
                </div>
            </a-layout-content>
            <!--右边页脚-->
            <a-layout-footer style="text-align: center">
                文治集团 ©2020 版权所有
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
// 从 vue-router 中导入 useRouter 函数
import { useRouter } from 'vue-router';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    AppstoreOutlined,
    BankOutlined,
    // ClusterOutlined
} from '@ant-design/icons-vue';

const collapsed = ref<boolean>(false);
const router = useRouter();

const changeMenu = (route: string) => {
    console.log("改变的侧边路由", route)
    //获取路由对象并切换
    router.push(route)
    // Vue 重复点击相同路由报错的问题 // 目前没这个问题，不需要修改
    // 判断当前路由是否是点击的路由
    // if (router.currentRoute.value.path !== route) {
    //     router.push(route)
    // }


}
</script>

<style> scoped>

 /*logo 样式*/
 /*#components-layout-demo-side .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }*/
 /*logo 圆角*/
 .circleImg {
     border-radius: 30px;
     width: 60px;
     height: 60px;
 }</style>
